<template>
  <div>
    <el-col :span="24" style="background-color:#fefefe;
    position: fixed;
    left:0px;
    top: 0px;
    z-index: 30;">
      <top></top>
    </el-col>
    <el-col :span="3" style="position:fixed; top:135px; left:10px; z-index:31; background-color:#fefefe ">
      
      
        <side-left></side-left>
  
      
    </el-col>
    <el-col :span="21" style="background-color:#eef1f6; position: absolute; top:125px; right:0; ">
      <el-card style="padding:30px; min-height:850px; margin-left:20px; margin-right:10px; margin-top:10px; ">
          <transition name="slide-fade" mode="out-in">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </transition>
      </el-card>
         
    </el-col>
    
    
  </div>
</template>

<script>
import Top from "@/views/Top.vue";
import SideLeft from "@/views/SideLeft.vue";

export default {
  name: "barlist",
  components: {
    Top,
    SideLeft
  }
};
</script>


<style  scoped>


.slide-fade-enter-active {
  transition: all 0.4s ease;
}
.slide-fade-leave-active {
  transition: all 0.4s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
  /* position: absolute; */
}

.el-main div{
  min-height: 700px;
  background-color: #fff;
    /* padding-bottom: 60px; */
    padding: 20px 30px 30px 30px;
}


</style>